<mat-form-field>
  <input matInput type="text" [formControl]="name" placeholder="Name" [matAutocomplete]="heroesAuto">
  <mat-error *ngIf="!name.valid">Name is required</mat-error>
</mat-form-field>

<mat-autocomplete #heroesAuto="matAutocomplete">
  <mat-option *ngFor="let hero of filteredHeroes$ | async" [value]="hero.name">{{hero.name}}</mat-option>
</mat-autocomplete>

<mat-checkbox [checked]="isChecked">Check me</mat-checkbox>

<div>
  <mat-form-field>
    <input matInput type="text" placeholder="Select a date" [matDatepicker]="picker">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>
</div>

<button mat-icon-button [matMenuTriggerFor]="menu">
  <mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu>
  <button mat-menu-item>Option A</button>
  <button mat-menu-item [matMenuTriggerFor]="submenu">Option B</button>
</mat-menu>

<mat-menu #submenu>
  <button mat-menu-item>Option B1</button>
  <button mat-menu-item>Option B2</button>
</mat-menu>
